<template>
  <div class="content-in">
    <div class="main">
      <h1>
        {{ $t('search.title') }}
      </h1>
      <span v-if="!!list.length" class="subtitle">
        {{ $t('search.total') }} {{ list.length }} {{ $t('search.tiao') }}
      </span>
      <div class="banner">
        <el-input v-model="keyword" :placeholder="$t('common.input')" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="goSearch"></el-button>
        </el-input>
      </div>
      <div v-loading="loading" class="news-scroll">
        <div v-for="item in list" :key="item.id" class="news-row" @click="handleTabChange(item)">
          <img :src="item.img" alt="" />
          <p class="ft-30 ft-bold pd-row-24 mg-b-15">
            {{ item[`title${capitalizeLang}`] }}
            {{ item[`subtitle${capitalizeLang}`] ? `|${item[`subtitle${capitalizeLang}`]}` : '' }}s
          </p>
          <p class="ft-24 mg-b-15 pd-row-24">
            {{ item[`desc${capitalizeLang}`] }}
          </p>
          <span class="more">{{ $t('common.learnMore') }} ></span>
        </div>
        <span v-if="!list.length" class="empty">{{ lang === 'en' ? 'empty' : '暂无数据' }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import * as api from '@/const/api'

export default {
  components: {},
  data() {
    return {
      keyword: '',
      list: [],
      loading: false,
    }
  },
  computed: {
    ...mapState(['lang']),
    ...mapGetters(['capitalizeLang']),
  },
  mounted() {
    this.keyword = this.$route.query.keyword || ''
    this.goSearch()
  },
  methods: {
    async goSearch() {
      try {
        this.list = []
        this.loading = true
        const { code, msg, data } = await this.$axios.$get(api.solutionContentSearch, {
          params: { words: this.keyword || '22' },
        })

        if (+code !== 200) {
          throw new Error(msg)
        }
        this.list = data.map((item) => {
          const obj = {
            ...item,
          }
          const content = JSON.parse(item.content)
          const isProduct = content[0].component === 'mult-picture'
          const isSolute = content.find((c) => c.component === 'tab-box')
          const isNews = content[0].component === 'mix-graphic-text'

          // 产品
          if (isProduct) {
            obj.titleZh = content[0].componentData.titleZh
            obj.titleEn = content[0].componentData.titleEn
            obj.subtitleZh = content[0].componentData.subtitleZh
            obj.subtitleEn = content[0].componentData.subtitleEn
            obj.descZh = content[0].componentData.descZh
            obj.descEn = content[0].componentData.descEn
            obj.img = content[0].componentData.pcImgZh
            obj.classificationType = 2
          }
          // 解决方案
          if (isSolute) {
            const soluteItem = isSolute.componentData.list.find((l) => l.url === item.id)
            obj.titleZh = soluteItem.titleZh
            obj.titleEn = soluteItem.titleEn
            obj.descZh = soluteItem.subtitleZh
            obj.descEn = soluteItem.subtitleEn
            obj.img = content[3].componentData.coverImage
            obj.classificationType = 1
          }
          // 新闻
          if (isNews) {
            const textlist = content[0].componentData.list.filter((f) => f.type === 'text')
            const imglist = content[0].componentData.list.filter((f) => f.type === 'image')
            obj.titleZh = content[0].componentData.titleZh
            obj.titleEn = content[0].componentData.titleEn
            obj.subtitleZh = content[0].componentData.sourceZh
            obj.subtitleEn = content[0].componentData.ssourceEn
            obj.descZh = textlist[0] ? textlist[0].content : ''
            obj.descEn = textlist[0] ? textlist[0].content : ''
            obj.img = imglist[0] ? imglist[0].content[0].response : ''
            obj.classificationType = 3
          }
          return obj
        })
      } catch (err) {
        this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    handleTabChange(item) {
      if (!item.id) {
        return
      }
      this.$router.push({
        path: '/solution',
        query: {
          id: item.id,
          type: item.classificationType,
          createTime: item.createTime,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  background: #f6f7f9;
  padding-bottom: 20px;

  .banner {
    display: flex;
    position: relative;
  }
  h1 {
    font-size: 40px;
    padding: 20px 0;
  }

  .subtitle {
    font-size: 28px;
    color: #999;
    margin: 0 0 20px;
    display: block;
  }
}

.main {
  padding: 0 20px;

  .news-row {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    padding-bottom: 30px;
    background-color: #fff;
  }

  img {
    margin: 0 auto 24px auto;
    width: 702px;
  }

  .more {
    margin: 35px 24px 0 0;
    align-self: flex-end;
    width: 200px;
    height: 42px;
    background: #0261bc;
    border: 1px solid #0762cb;
    border-radius: 21px;
    color: #fff;
    text-align: center;
    line-height: 36px;
  }

  .pd-row-24 {
    padding: 0 24px;
  }

  .empty {
    padding: 24px 0;
    display: block;
  }
}
</style>
